<template>
  <div id="app">
    <Header :isHome="isHome" v-show="!isPrinter"></Header>
    <el-container>
      <transition name="slip-in-left">
        <el-aside width="250px" v-if="!isHome&&!isPrinter"><Aside></Aside></el-aside>
      </transition>
      <el-main>
        <transition name="slip-in-right">
          <router-view></router-view>
        </transition>
      </el-main>

    </el-container>
    <Footer :isHome="isHome"></Footer>
  </div>
</template>

<script>
  import Aside from '@/components/GDMain/GDAside'
  import Header from '@/components/GDMain/GDHeader'
  import Footer from '@/components/GDMain/GDFooter'
export default {
  name: 'App',
  components:{
    Aside,
    Header,
    Footer
  },
  data(){
    return{
      isSign:false
    }
  },
  computed:{
    isHome(){
      return this.$route.name==='home';
    },
    isPrinter(){
      return this.$route.name==='printer';
    }
  }
}
</script>

<style>
  #app {
    margin:0;
    height:100%;
    background: #eeeeee;
  }
  #app>.el-container>.el-main{
    padding-top:0;
  }

  .el-aside {
    color: #333;
    text-align: center;
    line-height: 200px;
    box-shadow: 0 0 4px #333;
  }

  #app>.el-container {
    height:100%;
    width: 100%;
  }
  .slip-in-left-enter-active,.slip-in-left-leave-active{
    transition:all 0.5s ease;
  }
  .slip-in-left-enter,.slip-in-left-leave-to{
    transform:translateX(-100%);
  }
  .slip-in-right-enter-active,.slip-in-right-leave-active{
    transition:all 0.5s ease;
  }
  .slip-in-right-enter,.slip-in-right-leave-to{
    /*transform:translateX(100%);*/
    transform: translateX(100%);
  }
  .slip-in-top-enter-active,.slip-in-top-leave-active{
    transition:all 0.5s ease;
  }
  .slip-in-top-enter,.slip-in-top-leave-to{
    transform:translateY(-100%);
  }
  .slip-in-bottom-enter-active,.slip-in-bottom-leave-active{
    transition:all 0.5s ease;
  }
  .slip-in-bottom-enter,.slip-in-bottom-leave-to{
    transform:translateY(100%);
  }
  .fade-enter-active,.fade-leave-active{
    transition: all 0.5s ease;
  }
  .fade-enter,.fade-leave-to{
    opacity: 0;
  }
  .fade-fast-enter-active{
    transition: all 0.3s ease;
    transition-delay: 0.3s;
  }
  .fade-fast-leave-active {
    transition: none;
  }
  .fade-fast-enter,.fade-fast-leave-to{
    opacity: 0;
  }
  .fade-fast2-enter-active,.fade-fast2-leave-active{
    transition: all 0.3s ease;
  }
  .fade-fast2-enter,.fade-fast2-leave-to{
    opacity: 0;
  }
</style>
